<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<body>
    <input type="text"> 
    <!-- disabled 可以禁用按钮事件 -->
    <button class="btn-send" onclick="send()">发送</button>

    <script>
        var btn = document.querySelector('.btn-send');
        // 明显观察到定时器叠加， 处理方法两种：
        // 1. 每次send 先清除之前的定时器
        // 2. 在定时器结束之前，不允许再次触发事件
        var timer = null;
        function send(){
            // clearInterval(timer);
            // 禁用按钮
            btn.disabled = true;
            btn.innerText = '5s';
            var count = 5;
            // 开启定时器
            timer = setInterval(function(){
                if(count == 1){
                    // 开启点击事件
                    btn.disabled = false;
                    // 清除定时器
                    clearInterval(timer);
                    // 还原
                    btn.innerText = '发送';
                }else{
                    count -- ;
                    btn.innerText = count + 's';  
                }
            },1000)
        }
    </script>
</body>
</html>